<template>
  <div class="max-w-6xl mx-auto p-6 min-h-screen bg-gradient-to-br from-slate-50 to-purple-50">
    
    <!-- 页面标题 -->
    <div class="text-center mb-8 p-8 bg-white rounded-2xl shadow-lg">
      <h2 class="flex items-center justify-center gap-3 text-3xl font-semibold text-gray-800 mb-2">
        <n-icon class="text-4xl text-purple-500" :component="StarIcon" />
        积极分子推荐表编辑
      </h2>
      <p class="text-gray-600">请完善积极分子推荐相关时间节点信息</p>
    </div>

    <!-- 提示信息模块 -->
    <div class="mb-6 bg-gradient-to-r from-purple-50 to-indigo-50 border border-purple-200 rounded-2xl p-6 shadow-sm">
      <div class="flex items-center gap-3 mb-4">
        <n-icon class="text-2xl text-purple-600" :component="InfoIcon" />
        <h3 class="text-lg font-semibold text-purple-800">重要提示信息</h3>
      </div>
      <div class="space-y-2">
        <div v-for="(tip, index) in tipMessages" :key="index" class="flex items-start gap-3 text-sm text-purple-700">
          <div class="flex-shrink-0 w-1.5 h-1.5 bg-purple-500 rounded-full mt-2"></div>
          <span>{{ tip }}</span>
        </div>
      </div>
    </div>

    <n-form ref="formRef" :model="formValue" label-placement="top" label-align="left" label-width="auto">
      
      <!-- 推荐流程时间节点卡片 -->
      <n-card class="mb-6 rounded-2xl border-0 shadow-lg bg-white overflow-hidden" title="" :bordered="false">
        <template #header>
          <div class="flex items-center gap-3 py-2">
            <n-icon class="text-xl text-purple-500" :component="TimeIcon" />
            <span class="text-lg font-semibold text-gray-800">推荐流程时间节点</span>
          </div>
        </template>
        
        <n-grid :cols="24" :x-gap="24" :y-gap="5">
          <!-- 第一行：填表时间、团支部推荐时间 -->
          <n-form-item-gi :span="12" label="填表时间" path="activistRecommendation.formFillDate">
            <n-date-picker 
              v-model:formatted-value="formValue.activistRecommendation.formFillDate" 
              type="date" 
              value-format="yyyy-MM-dd" 
              style="width: 100%" 
              placeholder="选择填表时间"
              class="rounded-lg"
            />
          </n-form-item-gi>
          <n-form-item-gi :span="12" label="团支部推荐时间" path="activistRecommendation.branchRecommendDate">
            <n-date-picker 
              v-model:formatted-value="formValue.activistRecommendation.branchRecommendDate" 
              type="date" 
              value-format="yyyy-MM-dd" 
              style="width: 100%" 
              placeholder="选择团支部推荐时间"
              class="rounded-lg"
            />
          </n-form-item-gi>

          <!-- 第二行：基层团委审批意见时间、校团委审核意见时间 -->
          <n-form-item-gi :span="12" label="基层团委审批意见时间" path="activistRecommendation.baseCommitteeApprovalDate">
            <n-date-picker 
              v-model:formatted-value="formValue.activistRecommendation.baseCommitteeApprovalDate" 
              type="date" 
              value-format="yyyy-MM-dd" 
              style="width: 100%" 
              placeholder="选择基层团委审批时间"
              class="rounded-lg"
            />
          </n-form-item-gi>
          <n-form-item-gi :span="12" label="校团委审核意见时间" path="activistRecommendation.schoolCommitteeReviewDate">
            <n-date-picker 
              v-model:formatted-value="formValue.activistRecommendation.schoolCommitteeReviewDate" 
              type="date" 
              value-format="yyyy-MM-dd" 
              style="width: 100%" 
              placeholder="选择校团委审核时间"
              class="rounded-lg"
            />
          </n-form-item-gi>

          <!-- 第三行：确定为发展对象时间 -->
          <n-form-item-gi :span="12" label="确定为发展对象时间" path="activistRecommendation.developmentTargetDate">
            <n-date-picker 
              v-model:formatted-value="formValue.activistRecommendation.developmentTargetDate" 
              type="date" 
              value-format="yyyy-MM-dd" 
              style="width: 100%" 
              placeholder="选择确定为发展对象时间"
              class="rounded-lg"
            />
          </n-form-item-gi>
        </n-grid>
      </n-card>

      <!-- 流程进度展示卡片 -->
      <n-card class="mb-6 rounded-2xl border-0 shadow-lg bg-white overflow-hidden" title="" :bordered="false">
        <template #header>
          <div class="flex items-center gap-3 py-2">
            <n-icon class="text-xl text-indigo-500" :component="FlowIcon" />
            <span class="text-lg font-semibold text-gray-800">推荐流程进度</span>
          </div>
        </template>
        
        <div class="p-4">
          <div class="flex items-center justify-between mb-6">
            <div v-for="(step, index) in processSteps" :key="index" class="flex flex-col items-center relative">
              <!-- 连接线 -->
              <div v-if="index < processSteps.length - 1" class="absolute top-6 left-1/2 w-full h-0.5 transform translate-x-1/2 z-0" 
                   :class="step.completed ? 'bg-purple-300' : 'bg-gray-200'"></div>
              
              <!-- 步骤圆圈 -->
              <div class="relative z-10 flex items-center justify-center w-12 h-12 rounded-full border-2 mb-2 transition-all duration-300"
                   :class="step.completed ? 'bg-purple-500 border-purple-500 text-white' : 'bg-white border-gray-300 text-gray-400'">
                <n-icon :component="step.completed ? CheckIcon : ClockIcon" class="text-xl" />
              </div>
              
              <!-- 步骤标题 -->
              <div class="text-xs text-center max-w-20" :class="step.completed ? 'text-purple-600 font-medium' : 'text-gray-500'">
                {{ step.title }}
              </div>
              
              <!-- 时间显示 -->
              <div class="text-xs text-gray-400 mt-1" v-if="step.date">
                {{ step.date }}
              </div>
            </div>
          </div>
        </div>
      </n-card>

    </n-form>
  </div>
</template>

<script setup>
import { ref, watch, onMounted, computed } from 'vue'
import {
  NForm, NFormItem, NFormItemGi, NGrid, NDatePicker, NCard, NIcon
} from 'naive-ui'
import { 
  Star as StarIcon,
  Time as TimeIcon,
  GitNetwork as FlowIcon,
  Checkmark as CheckIcon,
  Time as ClockIcon,
  InformationCircle as InfoIcon
} from '@vicons/ionicons5'
import { cloneDeep } from 'lodash-es';

const props = defineProps({
  member: {
    type: Object,
    required: true
  }
})

const formRef = ref(null)
const formValue = ref(cloneDeep(props.member))

// 确保activistRecommendation对象存在
if (!formValue.value.activistRecommendation) {
  formValue.value.activistRecommendation = {
    formFillDate: null,
    branchRecommendDate: null,
    baseCommitteeApprovalDate: null,
    schoolCommitteeReviewDate: null,
    developmentTargetDate: null
  }
}

// 提示信息配置
const tipMessages = ref([])

// 生成提示信息的函数
const generateTipMessages = () => {
  const defaultTips = [
    '请按照时间顺序填写各个节点的日期，确保流程的逻辑性',
    '填表时间应早于或等于团支部推荐时间',
    '各审批环节时间应符合实际工作流程安排',
    '确定为发展对象时间是整个推荐流程的最终节点',
    '如有疑问请联系相关负责老师确认具体时间'
  ]
  
  tipMessages.value = defaultTips
}

// 配置提示信息内容的函数（预留接口）
const configureTipMessages = (messages) => {
  if (Array.isArray(messages)) {
    tipMessages.value = messages
  }
}

// 流程步骤计算
const processSteps = computed(() => {
  const recommendation = formValue.value.activistRecommendation
  return [
    {
      title: '填表',
      date: recommendation.formFillDate,
      completed: !!recommendation.formFillDate
    },
    {
      title: '团支部推荐',
      date: recommendation.branchRecommendDate,
      completed: !!recommendation.branchRecommendDate
    },
    {
      title: '基层团委审批',
      date: recommendation.baseCommitteeApprovalDate,
      completed: !!recommendation.baseCommitteeApprovalDate
    },
    {
      title: '校团委审核',
      date: recommendation.schoolCommitteeReviewDate,
      completed: !!recommendation.schoolCommitteeReviewDate
    },
    {
      title: '确定发展对象',
      date: recommendation.developmentTargetDate,
      completed: !!recommendation.developmentTargetDate
    }
  ]
})

onMounted(() => {
  generateTipMessages()
})

watch(() => props.member, (newVal) => {
  formValue.value = cloneDeep(newVal)
  // 确保activistRecommendation对象存在
  if (!formValue.value.activistRecommendation) {
    formValue.value.activistRecommendation = {
      formFillDate: null,
      branchRecommendDate: null,
      baseCommitteeApprovalDate: null,
      schoolCommitteeReviewDate: null,
      developmentTargetDate: null
    }
  }
})

defineExpose({
  getEditedData: () => {
    // 返回 activistRecommendation 对象，而不是整个 formValue
    console.log('ActivistRecommendationEditor - getEditedData called');
    console.log('ActivistRecommendationEditor - formValue.value:', formValue.value);
    console.log('ActivistRecommendationEditor - activistRecommendation:', formValue.value.activistRecommendation);
    
    // 直接返回 activistRecommendation 对象，而不是包装对象
    // 这样与API期望的数据格式一致
    console.log('ActivistRecommendationEditor - returning:', formValue.value.activistRecommendation);
    return formValue.value.activistRecommendation;
  },
  configureTipMessages
})
</script>